//1. 点击“同意协议”启用按钮，取消就禁用按钮，值改变事件
$('#agreebox').onchange=function(){
    let btn = $('.regbtn button'); //获取到注册按钮

    if(this.checked){
        btn.disabled=false; //取消禁用状态
        btn.className='active'; //让按钮激活
    }else{
        btn.disabled=true; //禁用按钮
        btn.className='';
    }
}

//2. 提交form时统一验证
$('.main-form').onsubmit=function(){
    //用户名验证
    let username = $('#username');
    if(username.value.length>=6 && username.value.length<=20){//6-20位
        username.nextElementSibling.style.display='none';
    }else{
        username.nextElementSibling.style.display='block';
        return false;
    }

    //手机号验证
    let tel = $('#tel');
    if(tel.value.length===11){//11位
        tel.nextElementSibling.style.display='none';
    }else{
        tel.nextElementSibling.style.display='block';
        return false;
    }

    //短信验证码
    let captcha = $('.captcha input');
    if(captcha.value.length===4){//4位
        captcha.nextElementSibling.style.display='none';
    }else{
        captcha.nextElementSibling.style.display='block';
        return false;
    }

    //密码验证
    let pwd = $('#pwd');
    if(pwd.value.length>=6 && pwd.value.length<=12){//6-12位
        pwd.nextElementSibling.style.display='none';
    }else{
        pwd.nextElementSibling.style.display='block';
        return false;
    }
}

//3. 输入内容时出现 清除图标，如果没有内容就隐藏 清除图标
$('#username').oninput=function(){
    if(this.value.length > 0){
        this.nextElementSibling.nextElementSibling.style.display='block';
    }else{
        this.nextElementSibling.nextElementSibling.style.display='none';
    }
}

$('#tel').oninput=function(){
    if(this.value.length > 0){
        this.nextElementSibling.nextElementSibling.style.display='block';
    }else{
        this.nextElementSibling.nextElementSibling.style.display='none';
    }
}

$('.captcha input').oninput=function(){
    if(this.value.length > 0){
        this.nextElementSibling.nextElementSibling.style.display='block';
    }else{
        this.nextElementSibling.nextElementSibling.style.display='none';
    }
}

$('#pwd').oninput=function(){
    if(this.value.length > 0){
        this.nextElementSibling.nextElementSibling.style.display='block';
    }else{
        this.nextElementSibling.nextElementSibling.style.display='none';
    }
}

//4. 给所有的 清除图标 绑定事件，点击时清除输入框的值
let clearBtn=$('.main-form img');
clearBtn.forEach(function(v){
    //批量绑定事件，点击时清除输入框
    v.onclick=function(){
        this.previousElementSibling.previousElementSibling.value='';
        this.style.display='none';
    }
});